<template>
    <div style="padding:20px;background:#fff;">
        <Spin v-if="loading" fix></Spin>
        <lock-setting
            showUser
            v-model="form"
            model-type="home"
            :submiting="notifySubmiting"
            :default-config="defaultConfig"
            @onNotifySave="handleNotifySave"
        ></lock-setting>
        <div style="margin-bottom:40px;padding-left:120px">
            <i-button :loading="submiting" @click="handleSubmit">保存修改</i-button>
        </div>
        <h2 class="margin-bottom-20 border-bottom" style="padding-bottom:20px">房源自定义列表</h2>
        <Table :loading="loadingTable" :data="tableData" :columns="columns"></Table>
    </div>
</template>

<script>
    import pick from 'lodash/pick'
import util from '@/libs/util'
import { http, api } from '@/libs/http'
import lockSetting from '../../config/components/lock-setting.vue'

export default {
      name: 'home-lock-setting',
      components: {
        lockSetting
      },
      props: {
        homeId: Number
      },
      created () {
        this.filed = Object.keys(this.form)
        this.initData()
        this.initSetting()
      },
      data () {
        return {
          loading: false,
          loadingTable: false,
          notifySubmiting: false,
          submiting: false,
          tableData: [],
          form: {
            model: '',
            enable_alarm: false,
            alarm_time: '',
            alarm_unlock: 10,
            // low_power: '',
            msg_notify: []
            // forbid_add_password: false,
          },
          filed: [],
          defaultConfig: {}, // 获取的门锁默认配置
          columns: [
            { title: '房间名称', key: 'name' },
            { title: '开启预警', key: 'enableAlarm' },
            { title: '预警时长', key: 'alarmTime' },
            { title: '超时未锁', key: 'alarmUnlock' }
          ]
        }
      },
      methods: {
        handleChange () {
          this.initData()
          this.initSetting()
        },
        async initData () {
          this.loadingTable = true
          try {
            const res = await http.req(api.lock_settubg_list, null, { type: 'home', value: this.homeId })
            if (!res) return
            this.tableData = res.map(item => {
              const { enable_alarm, alarm_time, alarm_unlock } = item.lock_alarm_setting
              return {
                name: item.room_name,
                enableAlarm: enable_alarm === null ? '-' : enable_alarm ? '是' : '否',
                alarmTime: alarm_time === null ? '-' : alarm_time + '小时',
                alarmUnlock: alarm_unlock === null ? '-' : alarm_unlock + '分钟'
              }
            })
          } catch (err) {
            console.log(err)
          } finally {
            this.loadingTable = false
          }
        },
        async initSetting () {
          this.loading = true
          try {
            const res = await http.req(api.lock_setting, null, { type: 'home', value: this.homeId })
            if (!res) return
            const defaultConfig = { ...res.defalut, ...res.parent, model: 'extend' }
            this.defaultConfig = defaultConfig
            const result = util.lockSettingTranslate(res)
            const formData = pick(result, this.filed)
            formData.msg_notify = formData.msg_notify || []
            this.form = formData
          } catch (err) {
            console.log(err)
          } finally {
            this.loading = false
          }
        },
        async handleSubmit () {
          this.submiting = true
          try {
                    const { msg_notify, ...rest } = this.form; // eslint-disable-line
            const data = {
              ...rest,
              alarm_unlock: 10,
              value: this.homeId,
              type: 'home'
            }
            const res = await http.req(api.lock_setting_update, null, data)
            if (res) {
              this.$Message.success({
                content: '更改成功，相应提醒仅在配置完成后生效',
                duration: 4
              })
              this.handleChange()
            }
          } catch (err) {
            console.log(err)
          } finally {
            this.submiting = false
          }
        },
        async handleNotifySave () {
          try {
            const { msg_notify } = this.form
            this.notifySubmiting = true
            const data = {
              value: this.homeId,
              model: 'self',
              type: 'home'
            }
            if (msg_notify.length) {
              data.msg_notify = msg_notify.map(item => String(item))
            } else {
              data.model = 'extend'
            }
            const res = await http.req(api.lock_notify_update, null, data)
            if (res) {
              this.$Message.success({
                content: '更改成功，相应提醒仅在配置完成后生效',
                duration: 4
              })
              this.handleChange()
            }
          } catch (err) {
            console.log(err)
          } finally {
            this.notifySubmiting = false
          }
        }
      }
    }
</script>